import React from 'react';
import 'react-chat-elements/dist/main.css';
import { Input, Button } from 'react-chat-elements';
import _ from 'lodash';
import styles from './InputBar.less';

class InputBar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      type: 1,
      value: '',
    };
  }

  onChange = (event) => {
    this.setState({
      value: event.target.value,
    });
  }

  onClick = () => {
    if (this.props.onSubmit && this.state.type && this.state.value) {
      this.props.onSubmit({
        type: this.state.type,
        value: this.state.value,
      });
    }
    if (this.input) {
      this.input.clear();
      this.setState({
        type: 1,
        value: '',
      });
    }
  }

  render() {
    return (<div className={styles.inputBar}>
      <Input
        ref={(el) => { this.input = el; }}
        onChange={this.onChange}
        placeholder="输入内容..."
        multiline
        rightButtons={
          <Button
            onClick={this.onClick}
            color={'white'}
            backgroundColor={'#4fa1c5'}
            text={'发送'}
          />
        }
      />
    </div>);
  }
}

InputBar.propTypes = {
  onSubmit: React.PropTypes.func,
};

InputBar.defaultProps = {
};

export default InputBar;
